<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="../../Style/skin.css" />
    <style type="text/css">
        .white_content{  
            display: none;  
            position: absolute;  
            top: 10%;  
            left: 33%;  
            width: 36%;  
            border: 2px solid #d3d3d3;  
            background-color: #f2f2f2;  
            z-index: 1002;
            height: 300px;   
            /* overflow: auto; */   
        } 
        .stepInfo {
            position: relative;
            background: #f2f2f2;
            margin: 10px 10px 10px 30%;
            height: 200px; 
          }
          /*竖条显示*/
          .stepInfo ul {
            /*float: left;*/
            height: 100%;
            width: 0.6em;
            background: #FFB837;
          }
          .stepIco {
            /*圆形显示*/
            border-radius: 1.4em;
            padding: 0.2em;
            background: #45a0f3;
            text-align: center;
            line-height: 1.4em;
            color: #fff;
            position: absolute;
            width: 1.4em;
            height: 1.4em;
          }
          .stepIco1 {
            left: -0.7em;
            top: 0;
          }
          .stepIco2 {
            left: -0.7em;
            top: 50px;
          }
          .stepIco3 {
            left: -0.7em;
            top: 100px ;
          }
          .stepIco4 {
            left: -0.7em;
            top: 150px ;
          }
          .stepIco5 {
            left: -0.7em;
            top: 200px ;
          }
          .stepText {
            color: #666;
            margin-top: 0.2em;
            width: 4em;
            text-align: center;
            margin-left: -1.4em;
          }
          .info {
            /*信息布局及颜色*/
            position: absolute;
            font-size: large;
            color: black;
            margin: 0 0 0 25px;
            width: 200px;
            color: #45a0f3;
          }
          .info_1 {
            top: 0;
          }
          .info_2 {
            top: 50px;
          }
          .info_3 {
            top: 100px;
          }
          .info_4 {
            top: 150px;
          }
          .info_5 {
            top: 200px;
          }
    </style>	    
</head>
    <body>
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <!-- 头部开始 -->
            <tr>
                <td width="17" valign="top" background="../../Images/mail_left_bg.gif">
                    <img src="../../Images/left_top_right.gif" width="17" height="29" />
                </td>
                <td valign="top" background="../../Images/content_bg.gif">
                    <table width="100%" height="31" border="0" cellpadding="0" cellspacing="0" background="./../../Images/content_bg.gif">
                        <tr><td height="31"><div class="title">流程管理</div></td></tr>
                    </table>
                </td>
                <td width="16" valign="top" background="../../Images/mail_right_bg.gif"><img src="../../Images/nav_right_bg.gif" width="16" height="29" /></td>
            </tr>
            <!-- 中间部分开始 -->
            <tr>
                <!--第一行左边框-->
                <td valign="middle" background="../../Images/mail_left_bg.gif">&nbsp;</td>
                <!--第一行中间内容-->
                <td valign="top" bgcolor="#F7F8F9">
                    <table style="width:100%" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
                        <!-- 空白行-->
                        <tr><td colspan="2" valign="top">&nbsp;</td><td>&nbsp;</td><td valign="top">&nbsp;</td></tr>
						<tr>
							<td colspan="4">
								<form class="clearfix">
									<div style="float:left">
										<p style="float:left; margin-left:30px;"><label>选择项目：</label>
                                            <select style="width:100px;">
                                                <option>请选择项目</option>
                                                <option>不限</option>
                                                <option>项目1</option>
                                                <option>项目2</option>
                                            </select>
										<p style="float:left; margin-left:30px;"><input type="button" class="btn" value="查询"/></p>
									</div>
								</form>
							<td>
						</tr>
                        <!-- 一条线 -->
                        <tr>
                            <td height="40" colspan="4">
                                <table width="100%" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                    <tr><td></td></tr>
                                </table>
                            </td>
                        </tr>
                        <!-- 列表展示开始 -->
                        <tr>
                            <td width="2%">&nbsp;</td>
                            <td width="96%">
                                <table width="100%">
                                    <tr>
                                        <td colspan="2">
                                            <form action="" method="">
                                                <table width="100%"  class="cont tr_color">
                                                    <tr>
                                                        <th>流程名字</th>
                                                        <th>制定人</th>
                                                        <th>所属项目</th>                                                        
                                                        <th>操作</th>
                                                    </tr>
                                                    <tr align="center" class="d">
                                                        <td>请假</td>
                                                        <td>周翔宇</td>
                                                        <td>项目1</td>
                                                        <td>															
                                                        	<a href="#" onclick="javasrcipt:ShowDiv('MyDiv')">发起</a>&nbsp;&nbsp;                                 
														</td>
                                                    </tr>
                                                    
                                                    
                                                   
                                                </table>
                                            </form>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="2%">&nbsp;</td>
                        </tr>
                        <!--列表展示结束 -->
                        <tr>
                            <td height="40" colspan="4">
                                <table width="100%" height="1" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                    <tr><td></td></tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td width="2%">&nbsp;</td>
                            <td width="51%" class="left_txt">
                           		
								<!--
								<a href="list_manager.html">销售经理</a>&nbsp;&nbsp;&nbsp;
								<a href="list_director.html">销售总监</a>
								-->
                            	<div style="float:right;">
									<b>
									首页&nbsp;&nbsp;&nbsp;
									上一页&nbsp;&nbsp;&nbsp;
									&lt;&lt;&nbsp;&nbsp;&nbsp;
									<font style="font-size:15pt">1</font>&nbsp;&nbsp;&nbsp;
									<a href="#">2</a>&nbsp;&nbsp;&nbsp;
									<a href="#">3</a>&nbsp;&nbsp;&nbsp;
									<a href="#">4</a>&nbsp;&nbsp;&nbsp;
									<a href="#">5</a>&nbsp;&nbsp;&nbsp;
									<a href="#">6</a>&nbsp;&nbsp;&nbsp;
									<a href="#">7</a>&nbsp;&nbsp;&nbsp;
									<a href="#">&gt;&gt;</a>&nbsp;&nbsp;&nbsp;
									<a href="#">下一页</a>&nbsp;&nbsp;&nbsp;
									<a href="#">尾页</a>&nbsp;&nbsp;&nbsp;
									每页显示10条&nbsp;&nbsp;&nbsp;
									当前 4/23 页&nbsp;&nbsp;&nbsp;
									共225条
									</b>
								</div>
                            </td>
                            <td>&nbsp;</td><td>&nbsp;</td>
                        </tr>
                    </table>
                </td>
                <td background="../../Images/mail_right_bg.gif">&nbsp;</td>
            </tr>
            <!-- 底部部分 -->
            <tr>
                <td valign="bottom" background="../../Images/mail_left_bg.gif">
                    <img src="../../Images/buttom_left.gif" width="17" height="17" />
                </td>
                <td background="../../Images/buttom_bgs.gif">
                    <img src="../../Images/buttom_bgs.gif" width="17" height="17">
                </td>
                <td valign="bottom" background="../../Images/mail_right_bg.gif">
                    <img src="../../Images/buttom_right.gif" width="16" height="17" />
                </td>           
            </tr>
        </table>

        <!-- 流程图 弹窗 -->

        <div id="MyDiv" class="white_content">  
            <div style="text-align: right; cursor: default; margin-top:10px;margin-bottom:10px;">  
                <span style="font-size: 16px; margin-right: 17px; color: #56BE2D; font-weight: 600;cursor:pointer;"  onclick="CloseDiv('MyDiv')">关闭</span>  
            </div>  
   

            <div class="stepInfo">
                  <ul>
                    <li></li>
                    <li></li>
                  </ul>
                  <div class="stepIco stepIco1" name="info_name_1">1</div>
                  <div class="info info_1" onmouseover="on_mous_move('info_name_1')" onmouseout="on_mous_out('info_name_1')">
                    <strong name="info_name_1">开始</strong>
                  </div>
                  <div class="stepIco stepIco2" name="info_name_2">2</div>
                  <div class="info info_2" onmouseover="on_mous_move('info_name_2')" onmouseout="on_mous_out('info_name_2')">
                    <strong name="info_name_2">组长审批</strong>
                  </div>
                  <div class="stepIco stepIco3" name="info_name_3">3</div>
                  <div class="info info_3" onmouseover="on_mous_move('info_name_3')" onmouseout="on_mous_out('info_name_3')">
                    <strong name="info_name_3">项目经理审批</strong>
                  </div>
                  <div class="stepIco stepIco4" name="info_name_1">4</div>
                  <div class="info info_4" onmouseover="on_mous_move('info_name_1')" onmouseout="on_mous_out('info_name_1')">
                    <strong name="info_name_4">总经理审批</strong>
                  </div>
                  <div class="stepIco stepIco5" name="info_name_1">5</div>
                  <div class="info info_5" onmouseover="on_mous_move('info_name_1')" onmouseout="on_mous_out('info_name_1')">
                    <strong name="info_name_5">结束</strong>
                  </div>
            </div>

        </div>

     
    


        
    </body>
    <script type="text/javascript">
        function ShowDiv(show_div){  
       
        document.getElementById(show_div).style.display='block';  
        }; 
        
        //关闭弹出层  
        function CloseDiv(show_div)  
        {  
            
          
            document.getElementById(show_div).style.display='none';  
        };  
          

    </script>
</html>